<template>
    <div class="article_serach">
        <div class="home-header">
            <div class="home-index-search">
                <i class="iconfont icon-sousuo"></i>
                <input type="text" v-model="monasteryname" placeholder="搜索">
                <i class="iconfont icon-guanbi" @click="clearFn()"></i>
            </div>

            <span class="article_search_cancel" @click="onClickLeft">取消</span>
        </div>


         <!-- 历史记录 -->
        <div class="history_record" v-show="state">
            <!-- <i class="iconfont icon-guanbi"></i> -->
            <h2>历史搜索</h2>
            <div class="history_cont">
                <div class="history_item" v-for="(item, indexs) of list" :key="indexs" v-if="indexs < sizeIndex" @click="router(`/music_pay?id=${item.musicid}&type=${type}`)">{{ item.musicname }}</div>
            </div>
        </div>
        <!-- 历史记录end -->

        <div class="song-list-cont" v-show="!state">
            <van-cell :title="item.musicname" v-for="(item, index) of list" :key="index" :url="`/music_pay?id=${item.musicid}&type=${type}`" v-if="list.length > 0">
                <template slot="right-icon">
                    <i class="iconfont icon-bofangliang- font-right" style="font-size:0.3rem; margin-right:0.1rem"></i>
                    <span class="custom-text font-right">{{ item.visitnum}}次播放</span>
                    <i class="van-icon van-icon-arrow van-cell__right-icon font-right"></i>
                </template>
            </van-cell>

            <div class="empty"  v-if="list.length <= 0">
                <i class="iconfont icon-kongzhuangtai-"></i>
                <span>没有找到您想要的内容</span>
            </div>
        </div>
    </div>
</template>
<script>
import {getResponse, getResponses} from "../api"

export default {
    data(){
        return {
            type:'',
            pagenum:1,
            pagesize:50,
            total:0,
            list:[],
            lock:false,
            sizeIndex:0,
            state:true,
            monasteryname:''
        }
    },
    watch:{
        monasteryname() {
            this.articleDetails()
        }
    },
    methods:{
        onClickLeft() {
            this.$router.go(-1)
        },

        clearFn() {
            this.monasteryname = ''
        },
        
        router(url) {
            this.$router.push(url)
        },

        //寺庙列表
        async articleDetails() {
            let musictype = this.type === 'music' ? '1' : '2'
            const data = await getResponses(`/fochina/query/musiclist/json`,{'musictype':musictype, 'musicname': this.monasteryname, 'property': '1', 'pagenum': this.pagenum, 'pagesize':this.pagesize})
            
            
            if(data.code === '0000') {
                this.state = this.monasteryname == ''
                this.list = data.data
                this.total = data.total

                this.lock  = false
            } else {
                console.log(data.error)
            }
        },
        switchFn(name) {
            this.monasteryname = name
        }
    },

    mounted(){
        this.type = this.$route.query.type 
        this.articleDetails()
        this.sizeIndex = parseInt(Math.random() * 10)

        let innerHeight = window.innerHeight

        
    }
}
</script>

<style>
.article_search_cancel {
    font-family: PingFangSC-Regular;
    font-size: 0.34rem;
    color: #FFF;
    min-width:0.7rem;
    height: 0.6rem;
    margin-left:0.2rem;
    display: flex;
    align-items: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history_cont {
    display: flex;
    flex-wrap: wrap;
}

.history_item {
    padding:0 0.2rem;
    min-width: 1.46rem;
    height: 0.46rem;
    background: #E9EAEC;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFangSC-Regular;
    font-size: 0.28rem;
    color: #333;
    margin-right:0.16rem;
    margin-bottom:0.16rem;
}

.article_serach .home-header {
    height: 1rem;
    width:100%;
    background-image: linear-gradient(-90deg, #B3A277 0%, #AB946C 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding:0 0.14rem 0 0.24rem;
}

.article_serach .home-index-search {
    width:6.2rem;
    height: 0.6rem;
    background-color:#fff;
    position: relative;
    
    box-sizing: border-box;
}

.home-index-search i.icon-sousuo{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    left:0.28rem;
    color:#B2B2B2;
}


.article_serach .home-index-search i.icon-guanbi {
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    right:0.28rem;
    color:#B2B2B2;
}

.article_serach .home-index-search input {
    border:none;
    width:100%;
    height: 0.6rem;
    font-size:0.28rem;
    padding:0 0.68rem 0 0.68rem;
    box-sizing: border-box;
    color:#666
}

.history_record {
    width: 7.5rem;
    background-color: #fff;
    min-height: 100vh;
    padding:0 0.3rem;
    box-sizing: border-box;
    
}

.history_record h2 {
    font-family: PingFangSC-Medium;
    font-size: 0.34rem;
    color: #333;
    justify-content: space-between;
    display: flex;
    text-align: center;
    width:100%;
    padding:0.26rem 0;
}


.song-list-cont {
    background-color: #fff;
    border-top:1px solid #F9F9F8;
    border-bottom:1px solid #F9F9F8;
    width:100%;
    padding:0 0.3rem;
    box-sizing: border-box;
}



</style>
